<template>
  <div class="dashboard">
    <!-- 顶部统计卡片 -->
    <div class="stats-cards">
      <StatsCard title="今日访问" :value="visitCount" icon="View" />
      <StatsCard title="新增用户" :value="userCount" icon="User" />
      <StatsCard title="订单量" :value="orderCount" icon="ShoppingCart" />
      <StatsCard title="待处理" :value="pendingTasks" icon="Bell" />
    </div>

    <!-- 内容区 -->
    <div class="content">
      <!-- 左侧：代办事项 -->
      <el-card class="card todo-card">
        <TodoCard />
      </el-card>

      <!-- 中间：数据增长图表 -->
      <el-card class="card chart-card">
        <GrowthChart />
      </el-card>

      <!-- 右侧：最近动态 -->
      <el-card class="card activity-card">
        <RecentActivity />
      </el-card>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import StatsCard from "@/components/Home/StatsCard.vue";
import GrowthChart from "@/components/Home/GrowthChart.vue";
import TodoCard from "@/components/Home/TodoCard.vue";
import RecentActivity from "@/components/Home/RecentActivity.vue";

// 数据模拟
const visitCount = ref(1000);
const userCount = ref(50);
const orderCount = ref(200);
const pendingTasks = ref(10);

// 模拟数据增长动画
onMounted(() => {
  const interval = setInterval(() => {
    visitCount.value += Math.floor(Math.random() * 10);
    userCount.value += Math.floor(Math.random() * 2);
    orderCount.value += Math.floor(Math.random() * 5);
    pendingTasks.value += Math.floor(Math.random() * 1);
  }, 2000);

  setTimeout(() => clearInterval(interval), 15000); // 15秒后停止模拟增长
});
</script>

<style scoped>
.dashboard {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 20px;
  background: linear-gradient(to bottom, #eef2f3, #f5f7fa);
  min-height: 100vh;
}

.stats-cards {
  display: flex;
  gap: 20px;
}

.content {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}

.card {
  flex: 1;
  transition: all 0.3s ease-in-out;
}

.card:hover {
  transform: scale(1.02);
}

.todo-card {
  width: 30%;
}

.chart-card {
  width: 40%;
}

.activity-card {
  width: 30%;
}
</style>
